<template>
	<view class="page">
		<!-- 头部区域 -->
		<view class="header">
			<view class="header-right">
				<view class="course-notice">
					<text style="color: red;">*</text>
					购买团提课月卡会员可免费预约团课
				</view>
				<view class="course-notice">
					<text style="color: red;">*</text>
					预约私教课直接选择课程
				</view>
			</view>
			<view class="header-left" @click="toMyCourse">
				<view class="course-title">我的课程</view>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content">
			<view class="cg-list">
			<view class="cg-item" 
				v-for="(gym, index) in gymList" 
				:key="index"
				@click="selectGym(index)">
				<image class="bg" src="/static/img/vip_bg.png" style="width: 100%; height: 100%" />
				<view class="bg-center">
					<text class="tt2" v-if="gym.status == 1">{{ gym.endAt ?  '到期时间：'+ gym.endAt : '' }}</text>
					<view class="t2 ">
						<text class="line1">场馆：{{ gym.venueName ||  '' }}</text>
					</view>
					<view class="t3 line1">月卡：￥{{ gym.price || '0' }}</view>
					<view class="t3 line2">场馆地址：{{ gym.venueAdder ||  '' }}</view>
					<!-- <view class="t3 line1">月卡:￥{{ gym.monthPrice || '0' }}</view>
					<view class="t4 line1">
						<text class="t4_2">场馆:地址{{ gym.address }}</text>
					</view> -->
					<view class="tool">
						<view class="btu" @click.stop="selectCourse(gym)"> 选择课程 </view>
						<view class="btu2" v-if="gym.status != 1" @click.stop="buyMonthlyCard(gym)"> 购买团操课月卡 </view>
					</view>
				</view>
			</view>
		</view>
		</view>
		<wd-status-tip v-if="gymList.length == 0" image="/static/viewNull.png"  :image-size="{ height: 50,  width: 50}" tip="暂无场馆" />
		<fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
	</view>
</template>

<script setup>
	const scrollTop = ref(0)
	const loadActive = ref(false)
	const list = ref([{
			value: 'Change会员',
			avatar: '/static/img/vip_tag2.png'
		},
		{
			value: 'Change通卡',
			avatar: '/static/img/vip_tag1.png'
		}
	])
	
	// 场馆列表数据
	const gymList = ref([])
	
	const current = ref(0);
	const current2 = ref(0);
	// 场馆选中索引，默认选择第一个
	const selectedGymIndex = ref(0);
	
	onPageScroll((e) => {
	  scrollTop.value = e.scrollTop
	})
	// 切换
	const changeCurrent = (index) => {
		if (index === 1) {
			uni.showToast({
				title: '敬请期待',
				icon: 'none'
			});
			return
		}
		current.value = index;
	}
	//开通会员
	 const toMyCourse = () => {
		uni.navigateTo({
			url: '/pagesA/view/course/myCourse'
		});
	}
	
	// 选择课程
	const selectCourse = (gym) => {
		uni.navigateTo({
			url: `/pagesA/view/course/selCourse?id=${gym.venueId}&name=${gym.venueName}`
		});
	}
	
	// 购买团操课月卡
	const buyMonthlyCard = (gym) => {
		uni.showToast({
			title: '敬请期待',
			icon: 'none'
		});
		return
		if(gym.price==0){
			uni.showToast({
				title: '该场馆不支持购买',
				icon: 'none'
			});
			return
		}
		const params = {
			venueId: gym.venueId,
			price: gym.price
		}
		uni.navigateTo({
			url: `/pagesA/view/course/pay3?params=${JSON.stringify(params)}`
		});
	}
	const getHomeVenue = () => {
		loadActive.value = true;
		uni.api.getUserVipEndAt({
		}).then(res => {
		  if (res.code == 0) {
			gymList.value = res.data || [];
		  }
		  loadActive.value = false;
		});
	}
	onShow(() => {
		getHomeVenue();
	})
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #fff;
		padding: 0 20rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0 0;
		margin: 20rpx 0 0;
		border-radius: 12rpx;
		.header-left {
			padding-right: 10rpx;
			.course-title {
				font-size: 28rpx;
				color: #333;
			}
		}

		.header-right {
			padding-right: 20rpx;
			padding-bottom: 10rpx;
			.course-notice {
				font-size: 26rpx;
				color: #666;
				border-radius: 20rpx;
			}
		}
	}

	.content {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.cg-list {
		width: 100%;
		max-width: 710rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		min-height: 100rpx;
		.cg-title {
			color: #3d2961;
			font-size: 28rpx;
			padding-bottom: 16rpx;
		}

		.cg-item {
			box-sizing: border-box;
			width: 100%;
			max-width: 690rpx;
			height: 329rpx;
			position: relative;
			margin: 30rpx auto;
			cursor: pointer;
			transition: all 0.3s ease;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
			&:hover {
				transform: translateY(-2rpx);
			}

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				border-radius: 12rpx;
			}

			.bg-center {
				position: relative;
				z-index: 10;
				color: #fff;
				padding: 20rpx 30rpx;
				height: 100%;
				box-sizing: border-box;
				padding-top: 30rpx;

				.t1 {
					font-size: 30rpx;
					font-weight: 500;
				}

				.t2 {
					font-size: 30rpx;
					margin-top: 20rpx;
				}
				.tt2{
					font-size: 22rpx;
					position: absolute;
					right: 20rpx;
					top: 10rpx;
					color: #fff;
				}

				.t3 {
					font-size: 28rpx;
					margin-top: 16rpx;
				}

				.t4 {
					font-size: 26rpx;
					margin-top: 10rpx;

					.t4_2 {
						margin-left: 10rpx;
					}
				}

				.t5 {
					font-size: 26rpx;
					margin-top: 20rpx;
				}

				.tool {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					display: flex;
					align-items: center;
					gap: 12rpx;
					font-size: 22rpx;

					.btu {
						color: #fff;
						background: #3a3c3e;
						padding: 0 20rpx;
						height: 54rpx;
						line-height: 54rpx;
						text-align: center;
						border-radius: 22rpx;
						font-weight: 500;
						transition: all 0.3s ease;
						box-shadow: 0 2rpx 6rpx rgba(58, 60, 62, 0.3);
						white-space: nowrap;
						min-width: 120rpx;
						
						&:active {
							transform: scale(0.95);
							background: #2a2c2e;
						}
					}

					.btu2 {
						color: #333;
						background: #f5f5f5;
						padding: 0 16rpx;
						height: 54rpx;
						line-height: 54rpx;
						text-align: center;
						border-radius: 22rpx;
						font-weight: 500;
						transition: all 0.3s ease;
						box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
						border: 1rpx solid #e0e0e0;
						white-space: nowrap;
						min-width: 160rpx;
						
						&:active {
							transform: scale(0.95);
							background: #e8e8e8;
						}
					}
				}
			}

		}
	}
</style>